<template>
  <!-- 资讯分类管理 -->
  <div class="controller">
    <!-- 头部部分 -->
    <div class="header">
      <!-- 新增按钮 -->
      <el-button type="success" @click="addController">更新</el-button>
    </div>
    <!-- 主体部分 -->
    <div class="table_content">
      <!-- 显示所有资讯 -->
      <!-- :data动态绑定整个数据源 -->
      <el-table :data="controllerData" style="width: 100%">
        <!-- 序号 -->
        <el-table-column type="index" label="序号" align="center">
        </el-table-column>
        <!-- 资讯id -->
        <el-table-column prop="id" label="资讯ID" align="center">
        </el-table-column>
        <!-- 资讯名称 -->
        <el-table-column prop="name" label="资讯名称" align="center">
        </el-table-column>
        <!-- 排序号 -->
        <el-table-column prop="no" label="排序号" align="center">
        </el-table-column>
        <!-- 资讯描述 -->
        <el-table-column prop="description" label="资讯描述" align="center">
        </el-table-column>
        <!-- 操作 -->
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" @click="controllerEdit(scope.row)"></el-button>
            <el-button type="primary" icon="el-icon-delete" @click="deleteController(scope.row.id)"></el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 模态框显示 -->
      <el-dialog
        :title="controllerTitle"
        :visible.sync="dialogFormVisible"
        @click="dialogClose"
      >
        <el-form :model="controllerFrom" :rules="rules" ref="controller_Form">
          <el-form-item
            label="栏目名称"
            :label-width="formLabelWidth"
            prop="name"
          >
            <el-input
              v-model="controllerFrom.name"
              autocomplete="off"
            ></el-input>
          </el-form-item>

          <el-form-item label="序号" :label-width="formLabelWidth" prop="no">
            <el-input v-model="controllerFrom.no" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item
            label="栏目描述"
            prop="description"
            :label-width="formLabelWidth"
          >
            <el-input
              type="textarea"
              v-model="controllerFrom.description"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogClose">取 消</el-button>
          <el-button type="primary" @click="commitControllter">确 定</el-button>
        </div>
      </el-dialog>
    </div>

    <!-- 底部部分 -->
    <div class="footer">
      <!-- 分页按钮 -->
    </div>
  </div>
</template>

<script>
import { get, post } from "@/utils/request";
export default {
  data() {
    return {
      //获取所有资讯数组
      controllerData: [],
      //模态框默认值
      dialogFormVisible: false,
      //动态绑定标题
      controllerTitle: "",

      formLabelWidth: "80px",
      //表单
      controllerFrom: {
        //栏目名称
        name: "",
        //栏目序号
        no: "",
        //栏目描述
        description: "",
      },
      // 表单规则
      rules: {
        name: [{ required: true, message: "请输入栏目名称", trigger: "blur" }],
      },
    };
  },
  computed: {},
  methods: {
    //获取所有资讯栏目
    async getAllcontrollerData() {
      //请求数据
      let res = await get("/category/findAll");
      // console.log(res.data);
      this.controllerData = res.data;
    },

    //更新操作
    async addController() {
      this.controllerTitle = "更新操作";
      this.dialogFormVisible = true;
      this.controllerFrom = {};
    },
    //修改当前行资讯 val1:scope.row
    async controllerEdit(val1) {
      this.controllerTitle = "修改操作";
      this.dialogFormVisible = true;
      //val1拿到了当前行的数据，赋值给表单标签
      this.controllerFrom = { ...val1 };
      
    },
    //根据id删除资讯 val2:scope.row.id 删除不了
    async deleteController(val2) {
      // console.log(val2);
      let obj = {
        id: val2,
      };
      console.log(obj);
      let res_d = await get("/category/deleteById", obj);
      this.$message({
        message: "删除成功",
        type: "success",
      });
      //删除成功后重新获取所有数据
      this.getAllcontrollerData();
    },

    //
    commitControllter() {
      this.$refs["controller_Form"].validate(async (valid) => {
        if (valid) {
          //发送表单验证的请求
          let res = await post("/category/saveOrUpdate", this.controllerFrom);
          //给用户一个成功的提示
          this.$message({
            showClose: true,
            message: "提交成功",
            type: "success",
          });
          //刷新页面
          this.getAllcontrollerData();
          //调用关闭模态框
          this.dialogClose();
        } else {
          // console.log("error submit!!");
          this.$message.error({
            showClose: true,
            message: "提交失败",
            type: "error",
          });
          return false;
        }
      });
    },
    //关闭模态框
    dialogClose() {
      this.dialogFormVisible = false;
    },
  },

  created() {
    this.getAllcontrollerData();
  },
  mounted() {},
};
</script>
<style scoped>
.header {
  line-height: 40px;
}
</style>